<template>
    <div>
        <TableLayout form-title="">
            <div slot="form-title" class="table-title">
                <el-form ref="form" :model="form" label-width="40px" slot="form">
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <el-form-item label="日期">
                                <el-date-picker :clearable="false" :editable="false" v-model="form.startDate" align="right" type="date" placeholder="选择日期" :picker-options="pickerOptions1" style="width:100%"></el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-button type="primary" @click="onSubmit">查询</el-button>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </TableLayout>
        <div class="count-box">
            <el-row :gutter="20">
                <el-col :span="8">
                    <div class="box-border">
                        <p class="title">时间段一<span v-if="morningStartDate">（{{morningStartDate}}-{{morningEndDate}}）</span></p>
                        <div v-if="morningTableData.length > 1" v-loading = "loading">
                            <div class="box-botton">
                                <countEchart :TableData = 'morning' height='300px' width='400px' id="morning" />
                            </div>
                            <el-table :data="morningTableData" border style="width: 100%">
                                <el-table-column align="center" label="考勤状态">
                                    <template scope="scope">
                                        {{!scope.row.name ? '--' : scope.row.name}}
                                    </template>
                                </el-table-column>
                                <el-table-column align="center" prop="value" label="人数"></el-table-column>
                                <el-table-column align="center" prop="percentage" label="百分比">
                                    <template scope="scope">
                                        {{scope.row.percentage + '%'}}
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                        <div v-else class="min-box">
                            该时间段考勤记录尚未生成，请稍后查看！
                        </div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="box-border">
                        <p class="title">时间段二<span v-if="noonStartDate">({{noonStartDate}}-{{noonEndDate}})</span></p>
                        <div v-if="noonTableData.length > 1" v-loading = "loading">
                            <div class="box-botton">
                                <countEchart :TableData = 'noon' height='300px' width='400px' id="atNoon" />
                            </div>
                            <el-table :data="noonTableData" border style="width: 100%">
                                <el-table-column align="center" label="考勤状态">
                                    <template scope="scope">
                                        {{!scope.row.name ? '--' : scope.row.name}}
                                    </template>
                                </el-table-column>
                                <el-table-column align="center" prop="value" label="人数"></el-table-column>
                                <el-table-column align="center" prop="percentage" label="百分比">
                                    <template scope="scope">
                                        {{scope.row.percentage + '%'}}
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                        <div v-else class="min-box">
                            该时间段考勤记录尚未生成，请稍后查看！
                        </div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="box-border">
                        <p class="title">时间段三 <span v-if="nightStartDate">({{nightStartDate}}-{{nightEndDate}})</span></p>
                        <!-- 判断是否有数据 -->
                        <div v-if="nightTableData.length > 1" v-loading = "loading">
                            <div class="box-botton">
                                <countEchart :TableData = 'night' height='300px' width='400px' id="night" />
                            </div>
                            <el-table :data="nightTableData" border style="width: 100%">
                                <el-table-column align="center" label="考勤状态">
                                    <template scope="scope">
                                        {{!scope.row.name ? '--' : scope.row.name}}    
                                    </template>
                                </el-table-column>
                                <el-table-column align="center" prop="value" label="人数"></el-table-column>
                                <el-table-column align="center" prop="percentage" label="百分比">
                                    <template scope="scope">
                                        {{scope.row.percentage + '%'}}
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                        <div v-else class="min-box">
                            该时间段考勤记录尚未生成，请稍后查看！
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script>
import TableLayout from 'components/TableLayout';
import countEchart from './countEchart';
import { teacherCheckinfoReport, findSchoolFirstAttendance} from 'api/attendanceManage';
import { mapGetters } from 'vuex';
export default {
    name: 'tchCount',
    components: {
        TableLayout,
        countEchart
    },
    data() {
        return {
            pickerOptions1: {
                disabledDate: time => {
                    let attendanceTime = this.attentiem - 3600 * 1000 *24;
                    if (attendanceTime) {
                        return time.getTime() < attendanceTime || time.getTime() > Date.now();
                    }
                },
                shortcuts: [
                    {
                        text: '今天',
                        onClick: picker => {
                            if (new Date() > this.attentiem) {
                                picker.$emit('pick', new Date());
                            } else {
                                this.$message('该时间段考勤记录尚未生成');
                            }
                        }
                    },
                    {
                        text: '昨天',
                        onClick: picker => {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            if (date> this.attentiem) {
                                picker.$emit('pick', date);
                            } else {
                                picker.$emit('pick', new Date());
                                this.$message('该时间段考勤记录尚未生成');
                            }
                        }
                    },
                    {
                        text: '一周前',
                        onClick: picker => {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            if (date > this.attentiem) {
                                picker.$emit('pick', date);
                            } else {
                                picker.$emit('pick', new Date());
                                this.$message('该时间段考勤记录尚未生成');
                            }
                        }
                    }
                ]
            },
            form: {
                startDate: '' // 打卡日期
            },
            morningTableData: [],
            noonTableData: [],
            nightTableData: [],
            morning: [],
            morningStartDate: '',
            morningEndDate: '',
            noon: [],
            noonStartDate: '',
            noonEndDate: '',
            night: [],
            nightStartDate: '',
            nightEndDate: '',
            loading: false,
            attendanceTime: null, // 开通时间
            attentiem: null
        };
    },
    created() {
        // this.initDate();
        if (this.cardIsOpen == 1) {
            // this.searchFetchData();
            this.getTime()
        } else {
            this.$message('该服务未开通！');
        }
    },
    computed: {
        ...mapGetters(['schoolId', 'schoolType', 'cardIsOpen'])
    },
    methods: {
    // 返回年月日时分秒
        fifterDate(date) {
            if (typeof date === 'string') {
                return date;
            } else {
                let month = this.addZero(date.getMonth() + 1 + '');
                let day = this.addZero(date.getDate() + '');
                return `${date.getFullYear()}-${month}-${day} 00:00:00`;
            }
        },
    // 补0
        addZero(str) {
            if (typeof str === 'string') {
                return str.length > 1 ? str : '0' + str;
            }
        },
        getTime() {
            findSchoolFirstAttendance(this.schoolId, '0').then(data => {
                if (data.data.content) {
                    this.attendanceTime = data.data.content.attendanceTime;
                    this.attentiem = new Date(this.attendanceTime).getTime();
                    //console.log(this.attendanceTime, '赋值');
                }
            }).then(() => {
                this.initDate();
            }).then(() => {
                if (this.attendanceTime) {
                    this.searchFetchData();
                }
            }).catch(Error => {
                //console.log('没有设置时间');
            })
        },
    // 初始化时间
        initDate() {
            // const end = new Date();
            const start = new Date();
            start.setTime(start.getTime());
            this.form.startDate = start;
        },
        searchFetchData() {
            this.loading = true;
            teacherCheckinfoReport(
        this.fifterDate(this.form.startDate),
        this.schoolId
      )
        .then(data => {
            this.loading = false;
            let content = data.data.content;
            let morningsTotalNum = [];
            let noonsTotalNum = [];
            let nightsTotalNum = [];
            this.morningStartDate = '';
            this.morningEndDate = '';
            this.noonStartDate = '';
            this.noonEndDate = '';
            this.nightStartDate = '';
            this.nightEndDate = '';

            if (!content[0]) {
                this.morning = [];
                morningsTotalNum = [];
            } else {
                this.morningStartDate = content[0].classStartTime;
                this.morningEndDate = content[0].classEndTime;

            // 判断是否正在生成考勤时间
                if (content[0].checkinfoReportDTO) {
                    this.morning = this.getName(content[0].checkinfoReportDTO.eduCheckinfoReportStatusDTOs);
                    morningsTotalNum =content[0].checkinfoReportDTO.sTotalNum;
                } else {
                    this.morning = [];
                    morningsTotalNum = [];
                }
            }

            if (!content[1]) {
                this.noon = [];
                noonsTotalNum = [];
            } else {
                this.noonStartDate = content[1].classStartTime;
                this.noonEndDate = content[1].classEndTime;

            // 判断是否正在生成考勤时间
                if (content[1].checkinfoReportDTO) {
                    this.noon = this.getName(content[1].checkinfoReportDTO.eduCheckinfoReportStatusDTOs);
                    noonsTotalNum = content[1].checkinfoReportDTO.sTotalNum;
                } else {
                    this.noon = [];
                    noonsTotalNum = [];
                }
            }

            if (!content[2]) {
                this.night = [];
                nightsTotalNum = [];
            } else {
                this.nightStartDate = content[2].classStartTime;
                this.nightEndDate = content[2].classEndTime;

            // 判断是否正在生成考勤时间
                if (content[2].checkinfoReportDTO) {
                    this.night = this.getName(content[2].checkinfoReportDTO.eduCheckinfoReportStatusDTOs);
                    nightsTotalNum = content[2].checkinfoReportDTO.sTotalNum;
                } else {
                    this.night = [];
                    nightsTotalNum = [];
                }
            
            }

          // 添加百分比
            this.morningTableData = this.onPercentage(this.morning, morningsTotalNum);
            this.noonTableData = this.onPercentage(this.noon, noonsTotalNum);
            this.nightTableData = this.onPercentage(this.night, nightsTotalNum);
        })
        .catch(Error => {
            this.loading = false;
            this.morningTableData = [];
            this.noonTableData = [];
            this.nightTableData = [];
            this.morning = [];
            this.noon = [];
            this.night = [];
        });
        },

    // 把type 改成 name
        getName(arr) {
      // 0 正常 ； 1 迟到； 2 早退；-1缺卡；-2未绑卡
            arr.forEach(item => {
                switch (item.type) {
                    case 0:
                        item.name = '正常';
                        delete item.type;
                        break;
                    case 1:
                        item.name = '迟到';
                        delete item.type;
                        break;
                    case 2:
                        item.name = '早退';
                        delete item.type;
                        break;
                    case -1:
                        item.name = '缺卡';
                        delete item.type;
                        break;
                    case -2:
                        item.name = '未绑卡';
                        delete item.type;
                        break;
                    default:
                        break;
                }
            });
            return arr;
        },
    // 计算百分比
        onPercentage(arr, total) {
            arr.forEach((item, index) => {
                item.percentage = (item.value / total * 100).toFixed(2);
            });
            return arr;
        },
        onSubmit() {
            if (this.cardIsOpen == 1) {
                this.searchFetchData();
            } else {
                this.$message('该服务未开通！');
            }
        }
    }
};
</script>
<style lang="scss" scoped>
.count-box {
  position: relative;
}
.min-box {
  min-height: 563px;
  line-height: 563px;
  text-align: center;
  color: #999999;
  font-size: 14px;
}
.box-border {
  background: #fff;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  text-align: center;
  padding: 20px;
}
.box-botton {
  margin-bottom: 20px;
  #morning,
  #atNoon,
  #night {
    margin: 0 auto;
  }
}
.title {
  text-align: left;
  position: relative;
  font-size: 14px;
  padding-left: 20px;
  &::after {
    content: "";
    position: absolute;
    width: 4px;
    height: 14px;
    background: #ff5e2c;
    left: 0;
    top: 4px;
  }
}
</style>

